<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{commons/commons::head(category)}">
</head>
<style>
    .m {
        margin-left: 20px;
    }

    .m2 {
        margin-left: 150px;
    }

    .flex-item {

        width: 100px;
        height: 170px;
        margin-top: 10px;
    }

    .cl {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
    }

    .img {
        width: 100px;
        height: 100px;
        margin-bottom: 15px;
        border: black 1px solid;
    }

    .img-object {
        object-fit: cover;
        object-position: 50% 20%;
    }

    .f {
        font-size: 15px;
        text-align: center;
        margin-bottom: 15px;
    }
</style>
<body style="background-image: linear-gradient(500grad,#a8edea,#fed6e3)">
<div th:replace="~{commons/commons::body}">
</div>
<div class="layui-tab layui-tab-brief m layui-col-md10" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">文章分类</li>
        <li>标签</li>
    </ul>
    <div class="layui-tab-content" style="height: auto;">
        <div class="layui-tab-item layui-show">
            <div class="flex-item m2 layui-inline" th:each="category:${categories}">
                <div class="cl">
                    <img th:src="@{/category/av/{aId}(aId=${category.id})}" class="img img-object">
                    <div class="f"><a th:href="@{/articles/showCategory/{aId}(aId=${category.id})}">[[${category.category}]]</a></div>
                    <div>文章</div>
                </div>
            </div>
        </div>
        <!--        标签的内容-->
        <div class="layui-tab-item">
            <div class="flex-item m2 layui-inline " th:each="ltag:${ltags}">
                <div class="cl">
                    <img th:src="@{/category/tag/{aId}(aId=${ltag.id})}" class="img img-object">
                    <div class="f"><a th:href="@{/tags/showCategory/{aId}(aId=${ltag.id})}">[[${ltag.tagName}]]</a></div>
                    <div>文章</div>
                </div>
            </div>


        </div>
    </div>
</div>
</body>
<script>

</script>
</html>